<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM(针对页面操作)+BOM(针对浏览器)
		     学习主题：针对页面操作比较多---DOM操作
			 JQuery操作DOM：理解：JQ框架改变页面内容效果
		     js基础就可以直接学习，了解函数使用
			 基础函数----事件源之后出现，事件源语法糖中
			 html()     作用：增加一个元素，覆盖原有html
			 val()      作用：input元素，实现修改文本框内容
			 text()      作用：生成一个文本内容
		 -->
		 
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<style>
		div{
			height: 200px;
			width: 200px;
			background: #aaffff;
		}
		
		
	</style>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<div></div>
		<h3>lorem</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nobis aliquid et laboriosam. Praesentium placeat ut dignissimos commodi, ex molestiae, quis provident fugit, quae veniam aspernatur sint reprehenderit sit necessitatibus!</p>
		
		
		<input type="button" value="按钮2" />
		<input type="text" value="输入框" />
		<script>
			$("button").click(function(){
				/*JQ操作DOM--html()函数使用*/
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/*练习1：div 200*200 背景颜色自定，鼠标滑过之后，
			  下面内容修改：<h3>提示，修改为黄颜色
			*/
		   $("div").mouseenter(function(){
			  $("h3").html("<h3>黄颜色</h3>");
		   });
			/*练习2：按钮 文本框     点击按钮，文本框增加一行文本*/
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中");
				$("input[type='text']").val("文本框内容修改")
			});
			/*利用JQ操作DOM(页面效果)：1.元素内容操作（3个函数）
			                         html()
									 val()
									 text()
			                         2.属性操作（4个函数）
									 <p align="center">
									 attr()
									 removeAttr()
									 <inpput checked>
									 prop()
									 removeProp()
									 
			                         3.样式类名操作（4个函数）
									 .demo{属性：属性值..}
									 addClass()
									 removeClass()
									 toggleClass()
									 hasClass()
									 4.元素样式操作（5个函数）
									 css()
									 width()和height()
									 outerWidth()和outerHeight()
									 语法：css("css属性","css属性值")
									 5.插入和删除修改操作（7个函数）
									 append()和prepend()
									 after()和before()
									 remove()和empty()
									 replaceWith()
									 6.元素遍历操作（7个函数）
									 7.JQ动画操作（7个函数）
			*/
		</script>
	</body>
</html>